<template>
  <div>
    <router-view></router-view>
    <div class="app-footer">
      <ul>
        <li>
          <span class="iconfont icon-jiekuan xinxi"></span>
          <span class="loan">借款</span>
        </li>
        <li>
          <span class="iconfont icon-huankuan xinxi"></span>
          <span class="loan">还款</span>
        </li>
        <li>
          <router-link to="/auth/shopping">
            <span class="iconfont icon-shangcheng xinxi"></span>
            <span class="loan shopping">商城
              <span class="shoppingCart">{{cartCount}}</span>
            </span>
          </router-link>
        </li>
        <li>
          <router-link to="/auth/home">
            <span class="iconfont icon-wode xinxi my"></span>
            <span class="loan my">我的</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import '../dome/iconfont.css';
export default {
  name: "appFooter",
  data() {
    return {
      cartCount: '',
    }
  },
  created() {
    this.$apis.cartCount()
      .then(data => {
        this.cartCount = data.data.data.cartCount;
        console.log(data);
      })
      .catch(error => {
        console.log(error);
      });
  }
}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
    user-select: unset;
    font-size: 0;
    text-decoration: none;
  }
.app-footer{
  bottom: 0;
  width: 100vw;
  height: 120px;
  background: white;
  position: fixed;
  z-index: 999;
}
.app-footer>ul>li{
  list-style: none;
  float: left;
  width: 2.5rem;
  font-size: .7rem;
  text-align: center;
}
.loan{
  font-size: .3466rem;
  color: #b4b4b4;
  position: relative;
  width: 2.5rem;
  top: -.1rem;
}
.xinxi{
  width: 2.5rem;
  display: inline-block;
  position: relative;
  font-size: .7066rem;
  height: .6rem;
  top: .1rem;
  color: #b4b4b4;
}
  .shopping{
    color: #b4b4b4;
    position: relative;
    display: inline-block;
  }
  .shoppingCart{
    display: inline-block;
    font-size: 12px;
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: red;
    color: white;
    text-align: center;
    line-height: 25px;
    top: -60px;
    margin-left: -15px;
  }
</style>
